<template>
  <div class="dataEstimation">
    <el-row :gutter="20">
      <el-col
        :span="11"
        style="
          border-radius: 10px;
          box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
          background-color: #fff;

        "
      >
        <div class="grid-content ep-bg-purple">
          <h4 class="header_1">状态估计</h4>
          <div class="fileSelection">
            <div class="title">选择数据文件</div>
            <el-input
              v-model="fileName"
              style="max-width: 100%"
              class="input-with-select"
            >
              <template #append>
                <el-upload
                  ref='fileRef'
                  class="upload-demo"
                  action="#"
                  :limit="1"
                  accept=".mat,.xlsx,.csv"
                  :auto-upload="false"
                  :show-file-list='false'
                  :on-change="handleChange"
                  :on-exceed="handleExceed"
                >
                  <template #trigger>
                    <el-button type="primary">...</el-button>
                  </template>
                </el-upload>
              </template>
            </el-input>
          </div>
        </div>
        <div class="ids">
          <div class="fid">
            <div class="title">工厂ID</div>
            <el-input v-model="fid" style="width: 100%" />
          </div>
          <div class="eid">
            <div class="title">设备ID</div>
            <el-input v-model="eid" style="width: 100%" />
          </div>
          <div class="cid">
            <div class="title">控制器ID</div>
            <el-input v-model="cid" style="width: 100%" />
          </div>
          <!-- <div class="dataType">
            <div class="title">数据类型</div>
            <el-select v-model="dataType" style="width: 100%">
              <el-option
                v-for="item in datatype_options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div> -->
        </div>
        <div class="estimateWay">
          <div class="title">估计方法</div>
          <el-select v-model="c_way" style="width: 100%">
            <el-option
              v-for="item in estimateWay_options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- <div class="storePath">
          <div class="title">保存路径</div>
          <el-input
            v-model="s_path"
            style="max-width: 100%"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="handleSavePath">...</el-button>
            </template>
          </el-input>
        </div> -->
        <div class="btns">
          <el-button
            type="primary"
            style="padding: 10px 40px"
            @click="uploadBtn"
            :disabled="isDisabled"
            >{{ b_estimation }}</el-button
          >
          <!-- <el-button type="warning" style="padding: 10px 20px">暂停</el-button>
          <el-button type="danger" style="padding: 10px 20px">结束</el-button> -->
        </div>
      </el-col>
      <el-col :span="0.5"></el-col>
      <el-col
        :span="12"
        style="
          border-radius: 10px;
          box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
          background-color: #fff;
        "
      >
      <div class="grid-content ep-bg-purple" style="width: 100%;height: calc(100vh - 60px);">
        <!-- <h4 class="header_2">状态栏</h4> -->
        <div class="over_btn">
          <el-tag :type="tagType" style="padding: 15px 39%; font-size: 18px">
            {{ b_e_isStop }}
          </el-tag>
        </div>
        <div class="chart"></div>
        <div class="result">
        <div class="status_lan">
        <el-divider content-position="left">状态栏</el-divider>
        <el-tag
            class="time-box"
            :style="{
              width:'100%',
              margin: '0 auto',
              fontSize: '16px',
              color: 'grey',
            }"
          >
            {{ result }}
          </el-tag>
        </div>

        </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import echarts from "@/plugins/echarts";
import { ScatterChart } from "echarts/charts";
import { codeEstimation } from '@/api/dataProcessing'
import { genFileId } from 'element-plus'

echarts.use([ScatterChart]);

import { ref, onMounted, computed } from "vue";
const fileName = ref("");
const eid = ref("");
const fid = ref("");
const cid = ref("");
const c_way = ref(0);
const s_path = ref("");
const result = ref("");

const b_estimation = ref("开始估计")
const b_e_isStop = ref("未进行状态估计")
const isDisabled= ref(false)
const chartYName = ref("齿轮箱振动传感器数据")


// const datatype_options = [
//   {
//     value: "1",
//     label: "整数数据"
//   },
//   {
//     value: "2",
//     label: "小数数据"
//   },{
//     value: "3",
//     label: "字符数据"
//   },{
//     value: "4",
//     label: "整数数据"
//   },
// ];
const estimateWay_options = [
  {
    value: 0,
    label: "卷积神经网络(CNN)"
  },
];

onMounted(() => {
  getChart();
});

let myChart = ref();
function getChart() {
  var chartDom = document.querySelector(".chart");
  myChart.value = echarts.init(chartDom);
  var option = {
    xAxis: {
      type: "category",
      // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      name:chartYName.value,
      type: "value",
      nameRotate:0.1,
    },
    legend: {
      right: "15%",
      data: ["齿轮箱振动传感器数据"],
      icon: "roundRect",
      top: "5%",
      textStyle: {
        fontSize: 14
      }
    },
    tooltip: {
      // trigger: 'axis',
      showDelay: 0,
      formatter: function (params) {
        console.log(params)
        if (params.value.length > 1) {
          return (
            params.seriesName +
            " :<br/>" +
            params.value +
            " " +
            params.value +
            " "
          );
        } else {
          return (
            params.seriesName +
            " :<br/>" +
            params.name +
            " : " +
            params.value +
            " "
          );
        }
      },
      axisPointer: {
        show: true,
        type: "cross",
        lineStyle: {
          type: "dashed",
          width: 1
        }
      }
    },
    series: [
      {
        name: '齿轮箱振动传感器数据',
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "scatter"
      }
    ]
  };

  option && myChart.value.setOption(option);
}

  let fileRef = ref()
  let fileUp = ref();
  // 选择文件时被调用，将他赋值给fileRef
  const handleChange = (file) => {
    fileRef.value = file;
    fileUp.value = file;
    fileName.value = file.name;
    const nameArr = file.name.split('.');
    const text = nameArr[0].split('_');
    fid.value = text[0]
    eid.value = text[1]
    cid.value = text[2]
  }

  // 覆盖前一个选择的
  const handleExceed = (files) => {
    fileRef.value.clearFiles()
    const file = files[0];
    file.uid = genFileId()
    fileRef.value.handleStart(file)
  }

  // 状态估计
  const uploadBtn = () => {
    if (fileUp.value) {
      b_estimation.value = "估计中..."
      b_e_isStop.value = "状态估计中..."
      isDisabled.value = true
      let formData = new FormData()
      formData.append("file", fileUp.value.raw)
      codeEstimation(formData).then(res => {
        if (res.status === 200) {
          myChart.value.setOption({
            series: [
              {
                data: res.data.prodata
              }]
          });
          if (res.data.prodata.length > 0) {
            b_estimation.value = "开始估计"
            b_e_isStop.value ="状态估计完成"
            result.value = " 开口机构齿轮出现缺齿故障"
            isDisabled.value = false
          }
        } else {
          b_estimation.value = "开始估计"
          b_e_isStop.value = "状态估计失败"
          result.value = ""
        }
      }).catch(error => {
        console.log(error)
      });
    }
  }

  //计算属性
  const tagType = computed(() => {
    if (b_e_isStop.value ==='未进行状态估计') {
      return 'danger'
    } else if (b_e_isStop.value ==='状态估计完成') {
      return 'success'
    }
  })

function handleSavePath() {
  // 处理保存路径逻辑
  const inputElement = document.createElement("input");
  inputElement.type = "file";
  inputElement.webkitdirectory = true; // 在 Chrome 中选择文件夹
  inputElement.multiple = false; // 只能选择一个文件夹
  inputElement.onchange = event => {
    const selectedPath = event.target.files[0].path;
    if (selectedPath) {
      s_path.value = selectedPath;
      // 可以根据需要将路径信息存储在其他变量中
    }
  };
  inputElement.click();
}
// function handleFileUpload() {
//   // 处理文件上传逻辑
//   const inputElement = document.createElement("input");
//   inputElement.type = "file";
//   inputElement.accept = ".mat"; // 设置允许的文件类型
//   inputElement.onchange = event => {
//     console.log(event)
//     const selectedFile = event.target.files[0];
//     if (selectedFile) {
//       // 检查文件类型
//       const fileType = selectedFile.name.split('.').pop().toLowerCase();
//       if (fileType !== 'mat') {
//         // 提示用户选择正确的文件类型
//         alert("请选择 .mat 文件");
//         return; // 中止上传
//       }

//       // 文件类型验证通过，更新界面显示选定的文件名
//       file.value = selectedFile.name;
//       // 可以根据需要将文件信息存储在其他变量中
//     }
//   };
//   inputElement.click();
// }
</script>
<style lang="scss" scoped>
.dataEstimation {
  width: 100%;
  height: 100%;
  font-size: 16px;

  .header_1,
  .header_2 {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    border-bottom: 1px solid #ccc;
  }

  .fileSelection {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
    margin-top: 20px;
  }

  .ids {
    width: 100%;
    height: 100px;
    margin-top: 20px;
    padding-left: 20px;

    .eid,
    .fid,
    .cid/* ,
    .dataType */{
      display: inline-block;
      width: 30%;
      height: 100%;
      margin-right: 15px;
    }

    .title {
      padding-bottom: 10px;
    }
  }

  .estimateWay {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
  }

  .storePath {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
  }

  .btns {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding-left: 20px;
  }

  .over_btn {
    margin-top: 20px;
    text-align: center;
  }

  .chart {
    width: 100%;
    height: 430px;
    margin-top: 20px;
  }
  .result {
    width: 100%;
    height: 80px;
    line-height: 40px;
    padding-left: 20px;
    margin-bottom: 20px;
    margin-top: 0px;
  }
}
</style>
